<!-- unit-tab1 -->
<template>
  <div class="unit-detail-tab animate__animated animate__zoomIn">
    <!-- 基本信息 -->
    <div class="detail-box detail1">
      <div class="box-info">
        <dv-border-box-2>
          <div class="info-top">
            <div class="top-title">
              <span>基本信息</span>
            </div>
            <div class="top-tip">
              <span v-if="tabData.baseinfo.is_major">重大危险源</span>
              <span v-if="tabData.baseinfo.use_isfocus">公众聚集场所</span>
              <!-- <span>化工</span> -->
              <span v-if="tabData.baseinfo.use_is_danage">危化</span>
              <span v-if="true">其他</span>
            </div>
          </div>
          <div class="info-main">
            <ul>
              <li>
                <div class="li-box">
                  <span>信用代码:</span>
                  <span :title="tabData.baseinfo.org_no">{{
                    tabData.baseinfo.org_no
                  }}</span>
                </div>
                <div class="li-box">
                  <span>单位名称:</span>
                  <span :title="tabData.baseinfo.com_name">{{
                    tabData.baseinfo.com_name
                  }}</span>
                </div>
              </li>
              <li>
                <div class="li-box">
                  <span>归属分局:</span>
                  <span>{{ tabData.baseinfo.dept_name }}</span>
                </div>
                <div class="li-box">
                  <span>单位地址:</span>
                  <span :title="tabData.baseinfo.address">{{
                    tabData.baseinfo.address
                  }}</span>
                </div>
              </li>
              <li>
                <div class="li-box">
                  <span>法人:</span>
                  <span>{{ tabData.baseinfo.deputy }}</span>
                </div>
                <div class="li-box">
                  <span>电话:</span>
                  <span>{{ tabData.baseinfo.com_phone }}</span>
                </div>
              </li>
              <li>
                <div class="li-box">
                  <span>联系人:</span>
                  <span>{{ tabData.baseinfo.lxr }}</span>
                </div>
                <div class="li-box">
                  <span>联系人电话:</span>
                  <span>{{ tabData.baseinfo.lxr_phone }}</span>
                </div>
              </li>
              <li>
                <div class="li-box">
                  <span>单位状态:</span>
                  <span>{{ tabData.baseinfo.com_states }}</span>
                </div>
                <div class="li-box">
                  <span>安全管理机构:</span>
                  <span>{{ tabData.baseinfo.id }}</span>
                </div>
              </li>
            </ul>
          </div>
        </dv-border-box-2>
      </div>
    </div>
    <!-- 特种设备信息 -->
    <div class="detail-box detail2">
      <div class="box-info">
        <dv-border-box-2>
          <div class="info-top">
            <div class="top-title">
              <span>特种设备信息</span>
            </div>
            <div class="top-tip">
              <span
                >设备总数：<a @click="toDeviceList(0)" class="link-blue">{{
                  tabData.comDevInfo.total
                }}</a>
                台</span
              >
              <!-- <span>黑名单</span>
                        <span>举报</span> -->
            </div>
          </div>
          <div class="info-main">
            <ul>
              <li>
                <!-- 锅炉 -->
                <div class="li-box">
                  <span>锅炉：</span>
                  <span
                    ><a @click="toDeviceList(1)">{{ tabData.comDevInfo.gl }}</a>
                    台</span
                  >
                </div>
                <!-- 压力容器 -->
                <div class="li-box">
                  <span>压力容器：</span>
                  <span
                    ><a @click="toDeviceList(2)">{{
                      tabData.comDevInfo.ylrq
                    }}</a>
                    台</span
                  >
                </div>
              </li>
              <li>
                <!-- 电梯 -->
                <div class="li-box">
                  <span>电梯：</span>
                  <span
                    ><a @click="toDeviceList(3)">{{ tabData.comDevInfo.dt }}</a>
                    台</span
                  >
                </div>
                <!-- 起重机械 -->
                <div class="li-box">
                  <span>起重机械：</span>
                  <span
                    ><a @click="toDeviceList(4)">{{
                      tabData.comDevInfo.qzjx
                    }}</a>
                    台</span
                  >
                </div>
                
              </li>
              <li>
                <!-- 厂内车 -->
                <div class="li-box">
                  <span>场内车：</span>
                  <span
                    ><a @click="toDeviceList(5)">{{
                      tabData.comDevInfo.jdc
                    }}</a>
                    台</span
                  >
                </div>
                <!-- 游乐设施 -->
                <div class="li-box">
                  <span>游乐设施：</span>
                  <span
                    ><a @click="toDeviceList(6)">{{
                      tabData.comDevInfo.dxylss
                    }}</a>
                    台</span
                  >
                </div>
                
              </li>
              <li>
                <!-- 客运索道 -->
                <div class="li-box">
                  <span>客运索道：</span>
                  <span
                    ><a @click="toDeviceList(7)">{{
                      tabData.comDevInfo.kysd
                    }}</a>
                    台</span
                  >
                </div>
                <div class="li-box">
                  <!-- <span>气瓶：</span>
                  <span><a @click="toDeviceList(7)">23</a> 台</span> -->
                </div>
              </li>
            </ul>
          </div>
        </dv-border-box-2>
      </div>
    </div>
    <!-- 作业人员信息 -->
    <div class="detail-box detail3">
      <div class="box-info">
        <dv-border-box-2>
          <div class="info-top">
            <div class="top-title">
              <span>作业人员信息</span>
            </div>
            <div class="top-tip">
              <span
                >作业人员总数：<a @click="toPersonList(1)" class="link-blue">{{
                  tabData.staffInfo.total
                }}</a>
                人</span
              >
            </div>
          </div>
          <div class="info-main">
            <ul>
              <!-- 1 -->
              <li>
                <div class="li-box">
                  <span>锅炉操作人员：</span>
                  <span
                    ><a @click="toPersonList(1)">{{ tabData.staffInfo.gl }}</a>
                    人</span
                  >
                </div>
                <div class="li-box">
                  <span>压力容器操作人员：</span>
                  <span
                    ><a @click="toPersonList(1)">{{
                      tabData.staffInfo.ylrq
                    }}</a>
                    人</span
                  >
                </div>
              </li>
              <li>
                <div class="li-box">
                  <span>起重机械操作人员：</span>
                  <span
                    ><a @click="toPersonList(1)">{{
                      tabData.staffInfo.qzjx
                    }}</a>
                    人</span
                  >
                </div>
                <div class="li-box">
                  <span>电梯操作人员：</span>
                  <span
                    ><a @click="toPersonList(1)">{{ tabData.staffInfo.dt }}</a>
                    人</span
                  >
                </div>
              </li>
              <li>
                <div class="li-box">
                  <span>厂内车操作人员：</span>
                  <span
                    ><a @click="toPersonList(1)">{{ tabData.staffInfo.jdc }}</a>
                    人</span
                  >
                </div>
                <div class="li-box">
                  <span>客运索道操作人员：</span>
                  <span
                    ><a @click="toPersonList(1)">{{
                      tabData.staffInfo.kysd
                    }}</a>
                    人</span
                  >
                </div>
              </li>
              <li>
                <div class="li-box">
                  <span>游乐设施操作人员：</span>
                  <span
                    ><a @click="toPersonList(1)">{{
                      tabData.staffInfo.dxylss
                    }}</a>
                    人</span
                  >
                </div>
              </li>
            </ul>
          </div>
        </dv-border-box-2>
      </div>
    </div>
    <!-- 单位档案信息 -->
    <div class="detail-box detail4">
      <div class="box-info">
        <dv-border-box-2>
          <div class="info-top">
            <div class="top-title">
              <span>单位档案信息</span>
            </div>
          </div>
          <div class="info-main">
            <ul>
              <div v-for="(item,i) in tabData.fileInfo" :key="i" class="li-box">
                <i class="el-icon-price-tag"></i>
                <span :title="item.dict_label" :class=" item.is_show?'':'gray'">{{ item.dict_label }}</span>
              </div>
              <!-- <div class="li-box">
                <i class="el-icon-price-tag"></i>
                <span>企业简介</span>
              </div>
              <div class="li-box">
                <i class="el-icon-price-tag"></i>
                <span>企业组织架构</span>
              </div>
              <div class="li-box">
                <i class="el-icon-price-tag"></i>
                <span>企业管理制度</span>
              </div>

              <div class="li-box">
                <i class="el-icon-price-tag"></i>
                <span class="line">特种设备管理制度</span>
              </div>
              <div class="li-box">
                <i class="el-icon-price-tag"></i>
                <span>应急演练预案</span>
              </div>
              <div class="li-box">
                <i class="el-icon-price-tag"></i>
                <span>特种设备岗位责任制</span>
              </div>

              <div class="li-box">
                <i class="el-icon-price-tag"></i>
                <span>特种设备安全技术档案管理制度</span>
              </div>
              <div class="li-box">
                <i class="el-icon-price-tag"></i>
                <span>特种设备维护保养制度</span>
              </div>
              <div class="li-box">
                <i class="el-icon-price-tag"></i>
                <span>企业年报</span>
              </div> -->
            </ul>
          </div>
        </dv-border-box-2>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import PublicListSmall from "../list/PublicListSmall";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { PublicListSmall },
  data() {
    //这里存放数据
    return {
      listData1: {
        head: [
          { name: "时间", prop: "p1" },
          { name: "预案名称", prop: "p2" },
          { name: "查看", prop: "col" },
        ],
        body: [
          {
            p1: "2020年11月11日",
            p2: "2020单位预案",
            col: "test",
          },
        ],
      },
    };
  },
  props: {
    tabData: {},
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合 
  methods: {
    toDeviceList(i) {
      console.log(i);
      this.$store.commit("setListCategory", "postGetUseDevList");
      this.$store.commit("setListTypeIndex", i);
      this.$store.commit("setListTitle", '在用设备数');
      this.$router.push("/list-page");
    },
    toPersonList(i) {
      console.log(i);
      this.$store.commit("setListCategory", "postGetPersonInfoById");
      this.$store.commit("setListTypeIndex", i);
      this.$store.commit("setListTitle", '人员概况');
      this.$router.push("/list-page");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // console.log("收到tabData");
    // console.log(this.tabData);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.unit-detail-tab {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  .detail-box {
    width: 50%;
    height: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
    .box-info {
      width: 95%;
      height: 100%;
      .info-top {
        width: 100%;
        height: 20%;
        // background-color: pink;
        display: flex;
        .top-title {
          width: 25%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          span {
            font-size: 0.24rem;
            font-weight: 700;
            color: @Green;
          }
        }
        .top-tip {
          width: 80%;
          height: 100%;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          span {
            font-size: 0.18rem;
            color: @FontColor;
          }
        }
      }
      .info-main {
        width: 100%;
        height: 78%;
        ul {
          width: 90%;
          height: 100%;
          margin: 0 auto;
          li {
            width: 100%;
            height: 20%;
            display: flex;
            .li-box {
              // flex: 1;
              width: 50%;
              color: #eee;
              font-size: 0.22rem;
              display: flex;
              justify-content: space-evenly;
              align-items: center;
              i {
                color: @Blue;
                display: block;
                width: 10%;
                height: 90%;
              }
              span {
                display: block;
                text-align: left;
                width: 50%;
                height: 80%;
                line-height: 150%;
                a {
                  color: @Blue;
                }
              }
              span:first-child {
                color: #ccc;
                font-weight: 700;
              }
              span:last-child {
                padding-right: 0.06rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                // background-color: #ccc;
              }
            }
          }
        }
      }
    }
  }
  .detail4 {
    .info-main {
      ul {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        .li-box {
          width: 33.3%;
          height: 20%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          // background-color: #ccc;
          i {
            color: @Blue;
            display: block;
            height: 90%;
            line-height: 150%;
            width: 10%;
            // height: 90%;
            font-size: 0.2rem;
          }
          span {
            display: block;
            height: 90%;
            line-height: 150%;
            font-size: 0.2rem;
            color: #eee;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>